<!-- Copyright 2019 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <link rel="stylesheet" href="./style.css">
  <title>Coconet</title>
</head>
<body>
  <h1>Coconet</h1>

  <p>Coconet is an instance of an orderlessNADE, that uses deep convolutional
    neural networks to perform music inpaintings through Gibbs sampling.
    In the demo below, we call <code>infill()</code> to create Bach-style
    4-part harmonies with the provided input, and display the result.
  </p>

  <h2>Infilling the first voice</h2>
  <p>The default behaviour of the model is to infill all of the "silence"
    in a NoteSequence. In this example, only the first voice (Soprano) is present
    for all the time steps, so Coconet will infill the other 3 voices (Alto,
    Tenor and Bass)
  </p>
  <section>
    <p><b>Input:</b> <code id="input-1"></code></p>
    <p><b>Result:</b> <code id="output-1">Loading...</code></p>
    <p><b>It took:</b> <code id="time-1"></code></p>
  </section>

  <h2>Infilling the third voice with configuration parameters.</h2>
  In this example, only the Tenor voice is present, so we infill the first 2
  and last voices (Soprano, Alto, Bass). In addition, we also use the
  <code>temperature</code> and <code>numIterations</code> parameters to the
  <code>infill()</code> method.
  <section>
    <p><b>Input:</b> <code id="input-2"></code></p>
    <p><b>Result:</b> <code id="output-2">Loading...</code></p>
    <p><b>It took:</b> <code id="time-2"></code></p>
  </section>

  <h2>Infilling a missing section from all the voices</h2>
  <p>As mentioned before, the default behaviour of the model is to infill all
    of the "silent" measures. In order to distinguish between intended rests and
    infill sections, you can use the <code>infillMask</code> parameter to
    specify exactly which section to be infilled.
  </p>
  <section>
    <p><b>Input:</b> <code id="input-3"></code></p>
    <p><b>Result:</b> <code id="output-3">Loading...</code></p>
    <p><b>It took:</b> <code id="time-3"></code></p>
  </section>

  <p><b>Total Leaked Memory:</b> <code id="leaked-memory"></code></b></p>
  <script src="coconet_bundle.js"></script>
</body>
</html>
